<template>
    <div class="main">
        <div class="serch">
            <div class="a">
                <div class="serch-rem">
                    <label for="name">姓名：</label>
                    <el-input v-model="name" placeholder="联系人姓名" id="name"></el-input>
                    
                </div>
                <div class="serch-rem">
                    <label for="num">手机号：</label>
                    <el-input v-model="num" placeholder="联系人手机号查询" id="num"></el-input>
                    
                </div>
                <div class="serch-rem">
                    <span>大客户行业：</span>
                    <select name="" id="">
                        <option value class="gra">建筑业</option>
                        <option value class="gra">畜牧业</option>
                        <option value class="gra">金融业</option>
                    </select>
                </div>
                <div class="serch-rem">
                    <label for="Company">单位：</label>
                    <el-input v-model="Company" placeholder="单位查询" id="Company"></el-input>
                   
                </div>
            </div>
            <br class="clear" />
            <div class="areas-box">
                <div class="sheng">
                    <div class="area-item">请选择省:</div>
                    <el-select v-model="value1" multiple placeholder="请选择省">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="sheng">
                    <div class="area-item">请选择市:</div>
                    <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择市">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    
                </div>
                <div class="sheng">
                    <div class="area-item">请选择区:</div>
                    <el-select v-model="value3" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择区">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>

            </div>
        </div>
        <div class="c">
            <div class="c-1">
                <div class="c-1-1">
                    <el-button type="primary" @click="dialogFormVisible = true">+添加大客户专员</el-button>
                        <el-dialog title="添加大客户" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="联系人" :label-width="formLabelWidth">
                                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入联系人"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" :label-width="formLabelWidth">
                                    <el-input v-model="form.password" show-password autocomplete="off" placeholder="请输入密码"></el-input>
                                </el-form-item>
                                <el-form-item label="电话" :label-width="formLabelWidth">
                                    <el-input v-model="form.num" autocomplete="off" placeholder="请输入电话"></el-input>
                                </el-form-item>
                                <el-form-item label="请选择区域" :label-width="formLabelWidth">
                                <el-select v-model="form.province" placeholder="请选择省">
                                    <el-option label="上海" value="shanghai"></el-option>
                                    <el-option label="北京" value="beijing"></el-option>
                                    <el-option label="重庆" value="chongqing"></el-option>
                                    <el-option label="天津" value="tianjing"></el-option>
                                    <el-option label="四川" value="sichuan"></el-option>
                                </el-select>
                                <el-select v-model="form.city" placeholder="请选择市">
                                    <el-option label="成都市" value="chengdu"></el-option>
                                    <el-option label="绵阳市" value="mianyang"></el-option>
                                    <el-option label="广安市" value="guangan"></el-option>
                                    <el-option label="雅安市" value="tianjing"></el-option>
                                    <el-option label="泸州市" value="sichuan"></el-option>
                                </el-select>
                                <el-select v-model="form.area" placeholder="请选择区">
                                    <el-option label="金牛区" value="jinniu"></el-option>
                                    <el-option label="双流区" value="shuangliu"></el-option>
                                    <el-option label="高新区" value="gaoxin"></el-option>
                                    <el-option label="锦江区" value="jinjiang"></el-option>
                                    <el-option label="武侯区" value="wuhou"></el-option>
                                </el-select>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>
                    <span>大客户专员:</span>
                    <el-radio v-model="radio" label="1">大客户专员</el-radio>
                    <el-radio v-model="radio" label="2">大客户所属下级</el-radio>
                </div>
                <div class="c-1-2">
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">查询</el-button>
                </div>
            </div>
            
            <div class="c-2">
                <div class="list" style="height:400px;">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" label="ID" width="50"></el-table-column>
                        <el-table-column prop="name" label="联系人" width="90"></el-table-column>
                        <el-table-column prop="phonenum" label="手机号" width="140"></el-table-column>
                        <el-table-column prop="time" label="开通时间" width="180"></el-table-column>
                        <el-table-column prop="agent" label="代理人" width="90"></el-table-column>
                        <el-table-column prop="connum" label="联系电话" width="140"></el-table-column>
                        <el-table-column prop="sheng" label="省" width="90"></el-table-column>
                        <el-table-column prop="shi" label="市" width="90"></el-table-column>
                        <el-table-column prop="qu" label="区" width="90"></el-table-column>
                        <el-table-column prop="swstate" label="账号状态">
                            <!-- 此处是由于element版本过低而造成的报错 -->
                            <template slot-scope="scope">
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="开"
                                inactive-text="关">
                            </el-switch>
                            </template>
                            
                        </el-table-column>
                        <el-table-column prop="operation" label="操作"></el-table-column>
                    </el-table>
                    
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
*{
    padding: 0;
    margin: 0;
}
.main{
    padding: 0 20px;
    .serch{
    box-sizing: border-box;
    height: 150px;
    padding: 20px 0;
}
}
.a{
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}
.serch-rem{
    float: left;
    margin-right: 20px;
}
.el-input{
    height: 40px;
    width: 200px;
    font-size: inherit;
    margin-right: 7px;
}
label
{
    cursor: default;
}

select{
    width: 206px;
    color: #c8c7cf;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}
option{
    font-weight: normal;
    display: block;
    pad: 0 2px 1px;
}

//下面是城市选择部分的属性
.areas-box{
    display: flex;
    align-items: center;
}
.area-item{
    font-size: 16px;
}
.sheng{
    display: flex;
    align-items: center;
}
.el-select{
    display: inline-block;
    position: relative;
    text-align: center;
}
.el-input_inner{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    padding: 2px 17px;
    width: 100%;
}

//下面是表格部分的属性
.c{
    height: 200px;
}
.c-1{
    height: 50px;
    display: flex;
    justify-content: space-between;
}
.c-1-1{
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
._add{
    cursor: pointer;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    background-color: #0084f4;
    color: #e3ffff;
}
.c-1-2{
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

table{
    display: table;
    box-sizing: border-box;
    text-align: initial;
    border-spacing: 2px;
    border-color: grey;
    tr{
        vertical-align: middle;
        display: table-row;
        border-color: inherit;
        th{
            color: #9093b3;
            height: 50px;
            border: 1px solid #ebeef5;
            display: table-cell;
            vertical-align: inherit;
            font-weight: bold;
        }
        td{
            height: 50px;
            border: 1px solid #ebeef5;
        }
    }
}

</style>
<script>
export default {
    data () {
        return {
            value:true,
            name:'',
            num:'',
            Company:'',
            radio: '1',
            options: [{
                value: '选项1',
                label: '北京市'
            }, {
                value: '选项2',
                label: '重庆市'
            }, {
                value: '选项3',
                label: '天津市'
            }, {
                value: '选项4',
                label: '四川省'
            }, {
                value: '选项5',
                label: '上海市'
            }],
            value1: [],
            value2: [],
            value3: [],
            //以下应该导入大客户的数据列表
            
            tableData: [{
                id:1,
                name:'张三',
                phonenum:18328346327,
                time:'2021-03-10 17:09:35',
                agent:'张三',
                connum:'15078216533',
                sheng:'四川省',
                shi:'成都市',
                qu:'高新区',
                swstate:'false',
                operation:'详情'
            }, {
                id:2,
                name:'李四',
                phonenum:18328346327,
                time:'2021-03-10 17:09:35',
                agent:'王五',
                connum:'15078216533',
                sheng:'河南省',
                shi:'郑州市',
                qu:'金水区',
                state:true,
                operation:'详情'
            }, {
                id:3,
                name:'张美丽',
                phonenum:15700401508,
                time:'2021-03-16 11:31:27',
                agent:'李四',
                connum:'15078216533',
                sheng:'四川省',
                shi:'广安市',
                qu:'广安区',
                state:true,
                operation:'详情'
            }, {
                id:4,
                name:'老大',
                phonenum:18328346327,
                time:'2021-03-17 11:43:30',
                agent:'吴晓勇',
                connum:'15078216533',
                sheng:'四川省',
                shi:'广元市',
                qu:'苍溪县',
                state:true,
                operation:'详情'
            },{
                id:5,
                name:'王二麻子',
                phonenum:13908653335,
                time:'2021-03-18 09:09:36',
                agent:'李四',
                connum:'15078216533',
                sheng:'北京',
                shi:'龙泉',
                qu:'双流',
                state:true,
                operation:'详情'
            }],
            dialogFormVisible: false,
            form: {
                name: '',
                password:'',
                num:'',
                province: '',
                city:'',
                area:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
        },
        formLabelWidth: '120px'
        };
    },
    methods: {
              
        
      
    },
}
</script>